<template>
	<div>
		<mu-icon-button icon="toc" @click="open('right')" style="float:right" />
	<div v-show="showList">
  		<qty-sum-item v-for = "item in list"
  			:key = "item.ItemID"
  			:ID = "item.ItemID"
  			:ItemNumber = "item.ItemNumber"  
  			:ItemName = "item.ItemName"
  			:QtySut = "item.QtySut"
 			:SumCount = "item.SumCount"
  			/>
  			</div>
     	<div v-show="!showList">
		<mu-circular-progress :size="24" color="blue500"/>
		</div>
		<div style="width: 100%;height: 8rem;"></div>
		

  <mu-popup position="right" popupClass="demo-popup-right" :open="rightPopup" @close="close('right')">
    	 
    <!--<mu-row gutter>
    	<mu-col width="50" tablet="30" desktop="25">
    		<label>开始时间</label>
    	</mu-col>
    	<mu-col width="50" tablet="30" desktop="25">
    		<mu-date-picker :fullWidth="noFull" v-model="startTime" hintText="开始时间"/>
    	</mu-col>
   	</mu-row>
   	
   	<mu-row gutter>
    	<mu-col width="50" tablet="30" desktop="25">
    		<label>结束时间</label>
    	</mu-col>
    	<mu-col width="50" tablet="30" desktop="25">
    		<mu-date-picker :fullWidth="noFull" v-model="endTime"   hintText="结束时间"/>
    	</mu-col>
   	</mu-row>-->
   	
    			<mu-row gutter>
    	<!--<mu-col width="50" tablet="30" desktop="25">
    		<label>开始时间</label>
    	</mu-col>-->
    	<mu-col  width="50" tablet="30" desktop="25">
    		<mu-date-picker :fullWidth="noFull" v-model="startTime" hintText="开始时间" v-on:dblclick="clearStartTime"/>
    	</mu-col>
    	<mu-col width="40" tablet="30" desktop="25">
    		<mu-raised-button label="清空" @click="clearStartTime" primary fullWidth/>
    	</mu-col>
   	</mu-row>
   	
   	<mu-row gutter>
    	<!--<mu-col width="50" tablet="30" desktop="25">
    		<label>结束时间</label>
    	</mu-col>-->
    	<mu-col width="50" tablet="30" desktop="25">
    		<mu-date-picker :fullWidth="noFull" v-model="endTime"   hintText="结束时间"/>
    		
    	</mu-col>
    	<mu-col width="40" tablet="30" desktop="25">
    		<mu-raised-button label="清空" @click="clearEndTime" primary fullWidth/>
    	</mu-col>
   	</mu-row>
    			
				
    			<mu-raised-button label="确定" @click="close('right')" primary fullWidth/>
  	</mu-popup>
	</div>
</template>

<script>
	import qtySumItem from '@/pages/project/demo2/reportForms/qtySumItem.vue'
	
	export default {
		components:{
			qtySumItem
		},
  data () {
    return {
      bottomPopup: false,
      topPopup: false,
      leftPopup: false,
      rightPopup: false,
      startTime:'',
	  endTime:'',
	  noFull:false,
	  refreshing: false,
      trigger: null,
	  num: 19,

	  list:[],

	  orderBillNo:'',
	  dialogOrder: false,
	  orderList:[],
	  orderId:null,//选择的订单Id
	  showList:false,
    }
  },
  mounted () {
    
     this.trigger = this.$el
     this.getQtySumByItem()
     
  },
  methods: {
  	
clearStartTime(){
  		this.startTime=''
  	},
  	clearEndTime(){
  		this.endTime=''
  	},
  	getQtySumByItem(){//获得按物料的数量汇总列表
  		let that = this
  		that.axios.post('/demo2/getQtySumByItem',{
  			'factoryId':localStorage.factoryId,
  			'uid':localStorage.uid, 	
  			'startTime':this.startTime,
  			'endTime':this.endTime,
  		}).then(function(response){
  			console.info(response.data.data)
  			that.showList=true
  			that.list = response.data.data.list
  		}).catch(function(error){
  			
  		})
  	},
  	
    open (position) {
      this[position + 'Popup'] = true
    },
    close (position) {
      this.getQtySumByItem()
      this[position + 'Popup'] = false
    }

  },
  watch: {
    topPopup (val) {
      if (val) {
        setTimeout(() => {
          this.topPopup = false
        }, 2000)
      }
    }
  }
}
</script>

<style>
	.demo-popup-right {
/*  display: flex;*/
  width: 75%;
  height: 75%;
  max-width: 25rem;
  padding: 24px;
}


.left-Grant{
		flex-wrap: nowrap
	}
	.right-mu-input{
		
		margin-top: 0.6rem;
	}
	.input-add{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
		flex-direction: row;
	}
	.title{
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	
	.choiceBtn{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 4.6rem;
		background-color: #0090FF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.6rem;
		color: white;
		font-size: 0.7rem;
		border-radius: 3px;
	}
	.choice-list{
		width: 100%;
		height: 100%;
		margin-top: 0.6rem;
	}
	.choice-sec{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec{
		display: flex;
		flex-direction: column;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec span{
		text-align:left;
		height:2rem;
		text-indent: 0.6rem;
		line-height: 2rem;
	}
	.choice-bg{
		background: #e5e5e5;
	}
	.choice-sec span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 0.6rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		/*border: 1px solid #e5e5e5;*/
		margin-top: 1.6rem;
	}
	.show-list span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-sec-input{
		height: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
		margin-bottom: 0.6rem;
		padding-right: 0.6rem;
	}
	.height-show{
		height: 2rem;
		line-height: 2rem;
	}
	.mu-text-field{
		font-size: 0.8rem!important;
	}
	.table-title{
		color: rgb(0, 144, 255);
		font-size: 0.9rem;
	}
	.table-title,.table-tr{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 2.4rem;
		border-bottom: 1px solid rgba(234,234,234,.8);
		
	}
	.table-tr{
		font-size: 0.8rem;
	}
	.choice-table-tr{
		background-color: rgba(234,234,234,.5);
	}
	.table-title span:nth-child(1),.table-tr span:nth-child(1){
		flex: 1.5;
	}
	.table-title span:nth-child(2),.table-tr span:nth-child(2){
		flex: 1;
	}
	.table-title span:nth-child(3),.table-tr span:nth-child(3){
		flex: 1;
	}


</style>